<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/dialog/dialog.js" charset="utf-8"></script>

<div id="dialogDemo">
       <div title='API'>
         <div>
		  <h2>Ccay.UI.dialog(url,title,options)</h2>				
		  <h3>作用：根据参数生成弹出框html代码</h3>				
		  <form id="param" class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
							
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="url"></samp>							    
						<span class="ccay-form-input">
							{String类型}<p>弹出页路径或路径key值</span></li>
	
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="title"></samp>
					    <span class="ccay-form-input">
							{String类型}<p>弹出框标题</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="options"></samp>
					    <span class="ccay-form-input">
							{String类型} <p>可省略，其他常用参数如下:
										<p>width:{Number} dialog显示宽度， 默认为 280、
										<p>height:{Number} diaolog显示高度，默认为自适应高度、
										<p>modal:{boolean} 是否为模式窗口， 默认为true、
										<p>fnLoad:装载完成执行的回调函数名，注意不要在后面加括号,
										<p>fnBeforeClose:关闭前执行的函数名，返回false可以阻止关闭，其他值不会,
										<p>load:{boolean} 页面载入方式 默认为true，填写false为    iframe方式载入、
										<p>buttons:{Object}  按钮设置，如 buttons:[{text:"确定",
										<p>onClick:function(item,dialog){alert("ok")},										
										<p>{text:'取消',onClick: function (item, dialog) { dialog.close();}}]
										<p>reSizable:{boolean} 是否设置为可拖拽改变大小，默认为false关闭	
					    </span></li>
				    </ul>
			   </div>
		    </form>
			</div>
				    
    </div>	
	   <div title='默认窗口大小'>
		  <div>
			<h3>打开一个html页面，默认窗口大小</h3>
			<br><br>
			<div class="ccay-form-input">
			    <span class="ccay-button" onclick="Ccay.example.ui.dialog.dialog1()">
				<a class="ccay-icon execute"></a>
				<label>dialog1</label>
			</span>	    
			</div>
			<br><br>
			<div>
				<span>打开一个默认窗口大小的html页面,省略options属性</span>
			</div>
			<h3>html code:</h3>
			<div class="codeArea">
				<pre id="html3">&lt;input value="dialog1" type="button" onclick="Ccay.example.ui.dialog.dialog1()"/></pre>
			</div>
			<h3>js code:</h3>
            <div class="codeArea">
				<pre id="js6">
//注册页面资源
Ccay.Page.register("Ccay.example.ui.dialog.listHtmlArea","ccay/htmlarea/listHtmlArea.html");
   
// 打开一个html页面，默认窗口大小
page.dialog1 = function() {
	//设计弹出窗口
	Ccay.UI.dialog('Ccay.example.ui.dialog.listHtmlArea', '默认窗口', {
		    //给弹出框上设计关闭按钮
		    buttons : [ { 
				//按钮上现实的文字
				text : 'close',
				//给按钮绑定事件
				onClick : function() {
					Ccay.example.ui.dialog.listHtmlArea.closeDialog();
			}
		} ]
	});		
}
				</pre>
			</div>
		  </div>
	   </div>
	   <div title='自定义窗口大小'>
		  <div>
			<h3>打开一个html页面，自定义窗口大小</h3>
			<br><br>
			<div class="ccay-form-input">
				<span class="ccay-button" onclick="Ccay.example.ui.dialog.dialog2()">
					<a class="ccay-icon execute"></a>
					<label>dialog2</label>
				</span>
			</div> 
			<br><br>   
			<div>
				<span>打开一个自定义窗口大小的html页面,设置options属性</span>
			</div>
			<h3>html code:</h3>
			<div class="codeArea">
				<pre id="html3">&lt;input value="dialog2" type="button" onclick="Ccay.example.ui.dialog.dialog2()"/></pre>
			</div>
			<h3>js code:</h3>
            <div class="codeArea">
				<pre id="js6">
//注册页面资源
Ccay.Page.register("Ccay.example.ui.dialog.listHtmlArea","ccay/htmlarea/listHtmlArea.html");

//打开一个html页面，自定义窗口大小
page.dialog2=function() {
	//设计弹出窗口
	Ccay.UI.dialog('Ccay.example.ui.dialog.listHtmlArea', '自定义窗口',
			//给弹出框上设计关闭按钮并设置窗口的大小
			{
		    width:700, height:500,
		    buttons : [ {
			//按钮上现实的文字
			text : 'close',
			//给按钮绑定事件
			onClick : function() {
				Ccay.example.ui.dialog.listHtmlArea.closeDialog();
			}
		} ]
	});	
}
				</pre>
			</div>
		  </div>
		</div>
	   <div title='引入外部页面'>
		  <div>
			<h3>打开一个URL的html页面</h3>
			<br><br>
			<div class="ccay-form-input">
			    <span class="ccay-button" onclick="Ccay.example.ui.dialog.dialog3()">
					<a class="ccay-icon execute"></a>
					<label>dialog3</label>
				</span>		    
			</div> 
			<br><br>   
			<div>
				<span>打开一个URL的html页面,URL直接写成弹出页路径</span>
			</div>
             <h3>html code:</h3>
			<div class="codeArea">
				<pre id="html3">&lt;input value="dialog3" type="button" onclick="Ccay.example.ui.dialog.dialog3()"/></pre>
			</div>
			<h3>js code:</h3>
            <div class="codeArea">
				<pre id="js6">
page.dialog3=function() {
// 设计弹出窗口
var dialog=Ccay.UI.dialog("http://www.baidu.com", '外部引入',
		{
	    //载入方式
		load:false,
		//设置窗口大小
		width:800,height:600,
		// 给弹出框上设计关闭按钮
	    buttons : [ { 
		// 按钮上现实的文字
		text : 'close',
		// 给按钮绑定事件
		onClick : function() {
			dialog.close();
		}
	} ]
});	
}
				</pre>
			</div>
	</div> 
</div>	
	   <div title='拖拽改变大小'>
		  <div>
			<h3>option中设置<font color:"red"> reSizable :true 打开拖拽改变大小模式 </font></h3>
			<br><br>
			<span class="ccay-button" onclick="Ccay.example.ui.dialog.dialog4()">
				<a class="ccay-icon execute"></a>
				<label>dialog4</label>
			</span>
			<br><br>
			<h3>html code:</h3>
			<div class="codeArea">
				<pre id="html4">&lt;input value="dialog1" type="button" onclick="Ccay.example.ui.dialog.dialog1()"/></pre>
			</div>
			<h3>js code:</h3>
            <div class="codeArea">
				<pre id="js4">
//注册页面资源
Ccay.Page.register("Ccay.example.ui.dialog.listHtmlArea","ccay/htmlarea/listHtmlArea.html");
   
// 打开一个html页面，默认窗口大小
page.dialog1 = function() {
	//设计弹出窗口
	Ccay.UI.dialog('Ccay.example.ui.dialog.listHtmlArea', '默认窗口', {
			// <font>打开拖拽改变大小模式 </font>
			reSizable :true
		    //给弹出框上设计关闭按钮
		    buttons : [ { 
				//按钮上现实的文字
				text : 'close',
				//给按钮绑定事件
				onClick : function() {
					Ccay.example.ui.dialog.listHtmlArea.closeDialog();
			}
		} ]
	});		
}
				</pre>
			</div>
		  </div>
	   </div>
	   <div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
       </div>
	   <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
				<ul>
				   <li class="ccay-form-row">
				        <samp><h3>问题</h3></samp>
						<span class="ccay-form-input">
							<h3>解决方案</h3>
						</span>
					</li>
				</ul>
			</div>		
			<div class="ccay-form-custom">
				<ul>						
					<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
					<li class="ccay-form-row ccay-form-whole">
						<samp class="i18n" i18nKey="1.为什么page.closeDialog()无效,无法关闭弹出框？"></samp>							    
						<span class="ccay-form-input">确保html页面要注册资源成key串“XXX.XXX”后，在其他页面引用key串就相当于引用该html页面,这样在弹出框或者tab才能使用page.closeDialog()关闭。</span>
					</li>	
				</ul>
			</div>
		  </form>						
		</div>	
</div>


